<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">

    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>

    <button id="btn0">click0</button>

    <div id="box">
        <button @click="handleClick">click1</button>
        <button @click="isActive && handleClick($event)">click2</button>
        <button @click="isShow=!isShow">click3</button>

        <div v-show="isShow">111111111111111</div>

        <!-- 只有点击ul自身时才触发事件 -->
        <!-- <ul @click.stop="handleULClick()"> -->
        <ul @click="handleULClick()">

            <!-- 阻止事件传播 e.stopPropagation() -->
            <li @click.stop="handleLiClick($event)">11111</li>

            <li @click="handleLiClick()">2222</li>

            <!-- 只触发一次 -->
            <li @click.once="handleLiClick()">3333</li>
        </ul>

        <a href="http://www.baidu.com" @click="handleChangePage()">changepage</a>

        <!-- 阻止默认事件 e.preventDefault() -->
        <a href="http://www.baidu.com" @click.prevent="handleChangePage()">changepage</a>

        <!-- 按下任意键触发事件 -->
        <input type="text" @keyup="handleKeyup($event)" />

        <!-- 按下Enter键触发事件 -->
        <input type="text" @keyup.enter="handleKeyup($event)" />

        <!-- 按下Ctrl+Enter键触发事件 -->
        <input type="text" @keyup.enter.ctrl="handleKeyup($event)" />
    </div>

    <script type="text/javascript">
        btn0.onclick = function (e) {
            console.log(e, e.target);
        }

        var vm = new Vue({
            el: "#box",
            data: {
                isShow: false,
                isActive: true
            },
            methods: {
                handleClick(e) {
                    console.log(e, e.target);// ev就是事件对象
                    // this.isShow = !this.isShow
                },

                handleLiClick(ev) {
                    // ev.stopPropagation();
                    console.log("li click")
                },

                handleULClick() {
                    console.log("ul click")
                },

                handleChangePage(ev) {
                    //ev.preventDefault();
                    console.log("handleChangePage")
                },

                handleKeyup(e) {
                    console.log(e.key)
                    if (e.key === "Enter") {
                        console.log("执行todolist 添加动作")
                    }
                    // console.log("执行todolist 添加动作")
                }
            }
        })


    </script>
</body>

</html>